<form class="layui-form layui-box" style='padding:25px 30px 20px 0' action="__SELF__" data-auto="true" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">缩略图</label>
        <div class="col-xs-3">
            {if isset($vo.img)&&$vo.img neq null}
                <div class="uploadimage" style="background-image: url('{$vo.img}')" data-tips-image="{$vo.img}"><input type="hidden" name="img" value="{$vo.img}"></div>
            {else}
                <div class="uploadimage"><input type="hidden" name="img"></div>
            {/if}
            <a data-file="one" data-field="img" data-type="jpg,png,gif,jpeg" href="javascript:void(0)" class="uploadbutton"><i class='fa fa-plus'></i></a>
        </div>

        <label class="layui-form-label label-required">分组名称</label>
        <div class="col-xs-3">
            <input type="text" name="name" value='{$vo.name|default=""}'
                   title="请输入分组名称" placeholder="请输入分组名称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label label-required">分组描述</label>
        <div class="col-xs-8">
            <input type="text" name="description" value='{$vo.description|default=""}'
                   title="请在输入分组描述" placeholder="请在输入分组描述" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">分类细节</label>
        <div class="col-xs-8">
            <input type="text" name="detail" value='{$vo.detail|default=""}'
                   title="请输入分类细节" placeholder="请输入分类细节" class="layui-input">
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="layui-form-item text-center">
        {if isset($vo['id'])}<input type='hidden' value='{$vo.id}' name='id'/>{/if}
        <button class="layui-btn" type='submit'><i class="fa fa-floppy-o"></i> 保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close><i class="fa fa-close"></i> 取消编辑</button>
    </div>
    <script>window.form.render();</script>
    <script>
        // 监听 input 的 onchange 事件
        // 当有文件上传时，会触发 change 事件
        $(function () {
            $('[name="img"]').on('change', function () {
                $(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');
            });
        });
    </script>
</form>
